<extend name="_layout/main"/>
<block name="head">
    <style>
        #introduce {
            margin: 0;
            width: 75%;
            height: 3rem;
            margint-top: 3%;
            border: none;
            padding: .5em;
            float: right;
            background-color: lightgoldenrodyellow;
        }

        .sel {
            margin: 0;
            padding: 0;
            width: 80%;
        }
    </style>
</block>
<block name="top">
    <header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
        <a class="btn" href="javascript:history.go(-1)">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
            返回
        </div>
    </header>
</block>
<block name="content">
    <empty name="info">
        <form name="applyForm" id="applyForm" action="{:U('apply_supplier')}">
            <div class="warp warpthree clearfloat">
                <include file="_layout/member_head"/>
                <div class="apply clearfloat">
                    <div class="top clearfloat">
                        <ul>
                            <li class="fl ra3 photo">
                                <div>
                                    <i class="iconfont icon-jiahao1"></i>
                                    <p>营业执照</p>
                                    <!--<span></span>-->
                                    <!--<img src="/Public/static/img/meishi.png"/>-->
                                </div>
                                <input type="hidden" name="business_license" id="business_license" value=""/>
                                <input type="file" name="thumb" data-tag="business_license" style="display: none;"/>
                            </li>

                            <li class="fr ra3 photo">
                                <div>
                                    <i class="iconfont icon-jiahao1"></i>
                                    <p>组织结构代码证</p>
                                </div>
                                <input type="hidden" name="organization_code" id="organization_code" value=""/>
                                <input type="file" name="thumb" data-tag="organization_code" style="display: none;"/>
                            </li>
                            <li class="fl ra3 photo">
                                <div>
                                    <i class="iconfont icon-jiahao1"></i>
                                    <p>法人身份证正面</p>
                                </div>
                                <input type="hidden" name="id_face" id="id_face" value=""/>
                                <input type="file" name="thumb" data-tag="id_face" style="display: none;"/>
                            </li>
                            <li class="fr ra3 photo">
                                <div>
                                    <i class="iconfont icon-jiahao1"></i>
                                    <p>法人身份证反面</p>
                                </div>
                                <input type="hidden" name="id_back" id="id_back" value=""/>
                                <input type="file" name="thumb" data-tag="id_back" style="display: none;"/>
                            </li>
                        </ul>
                    </div>
                    <div class="bottom clearfloat">
                        <ul>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>身份证号：</p>
                                    <input type="text" id="id_number" name="id_number" value="" placeholder=""/>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>商家名称：</p>
                                    <input type="text" id="supplier_name" name="supplier_name" value="" placeholder=""/>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>所在省份：</p>
                                    <select name="province_id" id="province" class="sel">
                                        <option value="">请选择省份</option>
                                        <volist name="areas" id="item">
                                            <eq name="item.area_parent_id" value="0">
                                                <option value="{$item.area_id}">{$item.area_name}</option>
                                            </eq>
                                        </volist>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>所在城市：</p>
                                    <select name="city_id" id="city" class="sel">
                                        <option value="">请选择城市</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>所在县区：</p>
                                    <select name="area_id" id="area" class="sel">
                                        <option value="">请选择县区</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>商家地址：</p>
                                    <input type="text" id="address" name="address" value="" placeholder=""/>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>所属行业：</p>
                                    <select name="industry" id="industry" class="sel">
                                        <option value="">请选择行业</option>
                                        <volist name="industry" id="item">
                                            <option value="{$item.id}">{$item.name}</option>
                                        </volist>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>联系电话：</p>
                                    <input type="text" id="telephone" name="telephone" value="" placeholder=""/>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>手机号：</p>
                                    <input type="text" id="mobile" name="mobile" value="" placeholder=""/>
                                </div>
                            </li>
                            <li>
                                <div class="box-s clearfloat">
                                    <p>商家描述：</p>
                                    <textarea id="introduce" name="introduce" value="" placeholder="商家描述"
                                              class="f-txt"></textarea>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <a href="javascript:void(0)" class="center-btn db ra3" id="btn-save">提交</a>
                </div>
            </div>
        </form>
        <else/>
        <div class="warp warpthree clearfloat">
            <div class="apply clearfloat">
                <div class="applylist clearfloat box-s">
                    <p class="fl">
                        <eq name="info.status" value="0">
                            您的记录已提交，请耐心等待管理员申请！
                        </eq>
                    </p>
                </div>
            </div>
        </div>
    </empty>
</block>
<block name="scripts">
    <script type="text/javascript" src="__JS__/jquery.form.js"></script>
    <script>
        $(document).on('click', '#btn-save', function (e) {
            e.preventDefault();
            var form = $("#applyForm");
            if (!form.is('form')) {
                return;
            }
            var action = form.attr("action");
            var data = form.serialize();
            if (action && data) {
                mui.confirm('确认提交吗？请保证资料合法有效', '提示', ['确认', '取消'], function (obj) {
                    if (obj.index == 0) {
                        $.post(action, data, function (xdata) {
                            if (xdata.status == 'success') {
                                mui.alert(xdata.message, '提示');
                                form[0].reset();
                            } else {
                                mui.alert(xdata.message, '错误提示');
                            }
                        }, 'json');
                    }
                })
            }
        })
        $(document).on('click', '.photo', function (e) {
            $(this).find('input[type="file"]')[0].click();
        })

        $(function () {
            $('input[type="file"]').wrap("<form name='ajax_upload' class='uploadform' method='post' action='{:U('uploadImageAjax')}' enctype='multipart/form-data'></form>");
        })

        $(document).on('change', 'input[type="file"]', function (e) {
            var _this = $(this);
            var form = _this.parent();
            if (!form.is('form')) {
                return;
            }
            var tag = _this.data("tag");
            if (_this.val()) {
                form.ajaxSubmit({
                    dataType: 'json', //数据格式为json
                    success: function (data) { //成功
                        if (data.status == 'success') {
                            $("#" + tag).val(data.data.url);
                            setTimeout(function () {
                                _this.parent().parent().find('div').html("<span></span><img src='" + data.data.url + "'/>");
                            }, 1000);
                        } else {
                            layer.msg('图片上传失败:' + data.message);
                        }
                    },

                });
            } else {
                mui.toast('请选择图片');
            }
        })

        $(document).on('change', '#province', function (e) {
            var pid = $(this).val();
            if (pid) {
                $.ajax({
                    url: "{:U('get_city')}",
                    type: 'get',
                    dataType: 'json',
                    data: {pid: pid},
                    success: function (xdata) {
                        if (xdata) {
                            var html = '<option value="">选择城市</option>';
                            for (var i in xdata) {
                                html += '<option value="' + xdata[i].area_id + '">' + xdata[i].area_name + '</option>'
                            }
                            $("#city").html(html);
                        }
                    }
                })
            }
        })
        $(document).on('change', '#city', function (e) {
            var pid = $(this).val();
            if (pid) {
                $.ajax({
                    url: "{:U('get_city')}",
                    type: 'get',
                    dataType: 'json',
                    data: {pid: pid},
                    success: function (xdata) {
                        if (xdata) {
                            var html = '';
                            for (var i in xdata) {
                                html += '<option value="' + xdata[i].area_id + '">' + xdata[i].area_name + '</option>'
                            }
                            $("#area").html(html);
                        }
                    }
                })
            }
        })
    </script>
</block>